<template>
	<view class="box">
		<view class="index_container">
			<view class="container-head">
				<image src="../../static/联系客服_slices/位图.png" mode=""></image>
			</view>
			<view class="message">
				<view class="message-name">
					<view class="message-name-text">
						蒙娜丽莎
					</view>
					<view class="message-name-img">
						<image src="../../static/联系客服_slices/编组 2备份 12.png" mode=""></image>
					</view>
				</view>
				<view class="message-phone">
					188****5505
				</view>
			</view>
			<view class="qr-code">
				<image src="../../static/联系客服_slices/会员码.png" mode=""></image>
			</view>
			<view class="arrows">
				<image src="../../static/联系客服_slices/更多.png" mode=""></image>
			</view>
		</view>
		<view class="member">
			<view class="member-img">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="member-info">
				<view class="member-info-top">
					普通会员
				</view>
				<view class="member-info-bottom">
					储值卡金额：****
				</view>
			</view>
			<view class="member-examine">
				查看权益
			</view>
		</view>
		<view class="indent">
			<view class="indent-top">
				<view class="indent-top-left">
					我的订单
				</view>
				<view class="indent-top-right">
					<view class="indent-top-right-text">
						全部订单
					</view>
					<view class="indent-top-right-img">
						<image src="../../static/联系客服_slices/更多@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="indent-bottom">
				<view class="indent-bottom-icon" v-for="(item, index) in iconData" :key="index">
					<view class="icon-img">
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<view class="text">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<view class="remind">
			<view class="remind-top">
				消息提醒
			</view>
			<view class="remind-info">
				<view class="remind-info-img">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="remind-info-right">
					<view class="remind-info-right-top">
						按摩 脊柱侧弯 正骨调理<text class="_text">鲍医师</text>
					</view>
					<view class="remind-info-right-bottom">
						核销码：0151 8764 8743
					</view>
				</view>
			</view>
		</view>
		<view class="collect">
			<view class="collect-left">
				我的收藏
			</view>
			<view class="collect-right">
				<view class="collect-right-text">
					全部收藏
				</view>
				<view class="collect-right-img">
					<image src="../../static/联系客服_slices/更多@2x.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="serve">
			<view class="serve-top">
				我的服务
			</view>
			<view class="serve-bottom">
				<view class="serve-bottom-icon" v-for="(item, index) in iconData2" :key="index">
					<view class="icon-img">
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<view class="text">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconData: [{
						id: 1,
						imgUrl: '../../static/联系客服_slices/全部6.png',
						label: '全部'
					},
					{
						id: 2,
						imgUrl: '../../static/联系客服_slices/待付款@2x.png',
						label: '待付款'
					},
					{
						id: 3,
						imgUrl: '../../static/联系客服_slices/待消费@2x.png',
						label: '待消费'
					},
					{
						id: 4,
						imgUrl: '../../static/联系客服_slices/待评价@2x(1).png',
						label: '待评价'
					},
					{
						id: 5,
						imgUrl: '../../static/联系客服_slices/待评价@2x.png',
						label: '已完成'
					}
				],
				iconData2: [{
						id: 1,
						imgUrl: '../../static/联系客服_slices/客服@2x.png',
						label: '客服'
					},
					{
						id: 2,
						imgUrl: '../../static/联系客服_slices/message-tick@2x.png',
						label: '意见与反馈'
					},
					{
						id: 3,
						imgUrl: '../../static/联系客服_slices/用户协议@2x.png',
						label: '用户协议'
					},
					{
						id: 4,
						imgUrl: '../../static/联系客服_slices/设置@2x.png',
						label: '设置'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.box {
		height: 100vh;

		.index_container {
			display: flex;

			.container-head {
				width: 108rpx;
				height: 108rpx;
				border-radius: 48rpx;
				margin-left: 44rpx;
				margin-right: 32rpx;

				image {
					width: 108rpx;
					height: 108rpx;
					border-radius: 48rpx;
				}
			}

			.message {
				margin-right: 198rpx;

				.message-name {
					display: flex;

					.message-name-text {
						width: 142rpx;
						height: 44rpx;
						margin-top: 10rpx;
						margin-bottom: 8rpx;
						margin-right: 4rpx;
						font-family: HelloFont, HelloFont;
						font-weight: normal;
						font-size: 34rpx;
						color: #2E2E2E;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}

					.message-name-img {
						width: 110rpx;
						height: 36rpx;
						margin-top: 16rpx;

						image {
							width: 110rpx;
							height: 36rpx;
						}
					}
				}

				.message-phone {
					width: 156rpx;
					height: 36rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 26rpx;
					color: #4F5A39;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.qr-code {
				width: 36rpx;
				height: 36rpx;
				margin-right: 22rpx;
				margin-top: 38rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.arrows {
				width: 18rpx;
				height: 30rpx;
				margin-top: 42rpx;

				image {
					width: 18rpx;
					height: 30rpx;
				}
			}
		}

		.member {
			width: 722rpx;
			height: 118rpx;
			background-image: url('../../static/联系客服_slices/编组 13.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 722rpx auto;
			margin-left: 14rpx;
			margin-top: 44rpx;
			display: flex;

			.member-img {
				width: 60rpx;
				height: 60rpx;
				margin-left: 30rpx;
				margin-top: 32rpx;
				margin-right: 28rpx;
				background: #E1CE80;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.member-info {
				.member-info-top {
					width: 138rpx;
					height: 44rpx;
					margin-top: 18rpx;
					margin-bottom: 8rpx;
					font-family: HelloFont, HelloFont;
					font-weight: normal;
					font-size: 34rpx;
					color: #B28714;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}

				.member-info-bottom {
					height: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #B28714;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.member-examine {
				margin-left: 285rpx;
				width: 130rpx;
				height: 44rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				line-height: 44rpx;
				text-align: center;
				margin-top: 40rpx;
				font-size: 22rpx;
				color: #B28714;
			}
		}

		.indent {
			width: 720rpx;
			height: 250rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			margin-left: 16rpx;
			margin-top: 24rpx;

			.indent-top {
				display: flex;
				justify-content: space-between;

				.indent-top-left {
					width: 134rpx;
					height: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #2E2E2E;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					margin-top: 22rpx;
					margin-left: 24rpx;
				}

				.indent-top-right {
					display: flex;

					.indent-top-right-text {
						width: 90rpx;
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #B0B0B0;
						line-height: 32rpx;
						text-align: right;
						font-style: normal;
						margin-right: 8rpx;
						margin-top: 26rpx;
					}

					.indent-top-right-img {
						width: 10rpx;
						height: 20rpx;
						margin-right: 18rpx;
						margin-top: 32rpx;

						image {
							width: 10rpx;
							height: 20rpx;
						}
					}
				}
			}

			.indent-bottom {
				display: flex;
				margin-top: 60rpx;
				justify-content: space-around;
				padding: 0 10rpx;

				.indent-bottom-icon {
					width: 68rpx;
					text-align: center;

					.icon-img {
						width: 68rpx;
						height: 48rpx;

						image {
							width: 48rpx;
							height: 48rpx;
							margin: 0 auto;
						}
					}

					.text {
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #494949;
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
						margin-top: 14rpx;
					}
				}
			}
		}

		.remind {
			width: 720rpx;
			height: 274rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			margin-top: 20rpx;
			margin-left: 16rpx;

			.remind-top {
				width: 692rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #2E2E2E;
				line-height: 96rpx;
				text-align: left;
				font-style: normal;
				border-bottom: 1rpx solid #EEEFF2;
				margin-left: 14rpx;
				padding-left: 10rpx;
			}

			.remind-info {
				display: flex;
				width: 692rpx;
				height: 144rpx;
				background: linear-gradient(112deg, #F6F7F5 0%, #FBFFF7 100%), #F6F6F6;
				border-radius: 20rpx;
				border: 1rpx solid #F2EEEE;
				margin-left: 14rpx;
				margin-top: 12rpx;

				.remind-info-img {
					width: 104rpx;
					height: 103rpx;
					margin-top: 20rpx;
					margin-left: 14rpx;

					image {
						width: 104rpx;
						height: 103rpx;
					}
				}

				.remind-info-right {
					.remind-info-right-top {
						margin-top: 36rpx;
						margin-left: 20rpx;
						height: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 500;
						font-size: 28rpx;
						color: #202022;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;

						._text {
							width: 120rpx;
							height: 34rpx;
							background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #EAD4B1 100%);
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #9F918B;
							padding-left: 10rpx;
							text-align: center;
							margin-left: 14rpx;
						}
					}

					.remind-info-right-bottom {
						width: 252rpx;
						height: 22rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 500;
						font-size: 22rpx;
						color: #C19C55;
						line-height: 34rpx;
						font-style: normal;
						margin-top: 18rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.collect {
			width: 720rpx;
			height: 102rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			margin-left: 16rpx;

			.collect-left {
				width: 134rpx;
				height: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #2E2E2E;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				margin-top: 28rpx;
				margin-left: 24rpx;
			}

			.collect-right {
				display: flex;

				.collect-right-text {
					width: 90rpx;
					height: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #B0B0B0;
					line-height: 32rpx;
					text-align: right;
					font-style: normal;
					margin-top: 36rpx;
				}

				.collect-right-img {
					width: 10rpx;
					height: 20rpx;
					margin-top: 43rpx;
					margin-right: 18rpx;
					margin-left: 8rpx;

					image {
						width: 10rpx;
						height: 20rpx;
					}
				}
			}
		}
		.serve{
			width: 720rpx;
			height: 280rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			margin-top: 20rpx;
			margin-left: 16rpx;
			.serve-top{
				height: 100rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #2E2E2E;
				line-height: 100rpx;
				text-align: left;
				font-style: normal;
				margin-left: 24rpx;
			}
			.serve-bottom{
				display: flex;
				justify-content: space-around;
				.serve-bottom-icon{
					width: 112rpx;
					.icon-img{
						width: 88rpx;
						height: 88rpx;
						margin: 0 auto;
						image{
							width: 88rpx;
							height: 88rpx;
						}
					}
					.text{
						margin-top: 32rpx;
						width: 112rpx;
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #494949;
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}
	}
</style>